<template>
  <layout-empty>
    <view class="login-header-bg"></view>
    <view class="login-container">
      <view class="login-body flex flex-column">
        <view class="login-logo-box">
          <view class="logo flex justify-center align-center">
            <image class="logo-image" :src="LogoPng"></image>
          </view>
          <view class="sys-name-zh mt2.5">华信管理平台</view>
          <view class="sys-name-en">HUAXIN MANAGEMENT PLATFORM</view>
        </view>
        <view class="login-form-box mt5">
          <uni-forms ref="formRef" :model="loginForm" :rules="rules">
            <uni-forms-item name="username">
              <uni-easyinput
                class="login-input"
                prefixIcon="person"
                v-model="loginForm.username"
                placeholder="请输入用户名"
              />
            </uni-forms-item>
            <uni-forms-item name="password">
              <uni-easyinput
                class="login-input"
                prefixIcon="locked"
                v-model="loginForm.password"
                type="password"
                placeholder="请输入用户密码"
              />
            </uni-forms-item>
            <uni-forms-item name="123">
              <view class="login-error">
                {{ loginFailMsg }}
                <text class="refresh-btn" @click="handleReload" v-if="reloadPage">
                  <uni-icons style="color: blue" type="reload" size="14"></uni-icons>刷新页面
                </text>
              </view>
              <view class="login-btn">
                <d-button @click="openDialog">登录</d-button>
              </view>
            </uni-forms-item>
          </uni-forms>
        </view>
      </view>
      <login-valid-dialog @confirm="loginFn" ref="loginValid" />
      <view class="login-footer-bg"></view>
    </view>
  </layout-empty>
</template>

<script setup lang="ts">
import LogoPng from '@/static/logo.svg'
import {useLoginStore} from "@/stores";
import LoginValidDialog from "@/pages/login/validDialog.vue";
import {useLoginApi} from "@/api/login";
import {LoginBaseData, LoginFormData} from "@/types/login";
import {LoginAuthType} from "@/enum";
import {currRoute} from "@/utils";
import LayoutEmpty from "@/layouts/empty.vue";

const loginForm = reactive({
  username: 'admin',
  password: '!QAZ2wsx@passkey*<&',
  // username: null,
  // password: null,
  mobile: null
})

let authBaseData: LoginBaseData;

const rules = {
  username: { rules: [{required: true, errorMessage: '用户名必填'}]},
  password: { rules: [{required: true, errorMessage: '密码必填'}]}
}

const loginValid = ref();
const formRef = ref();
const loginFailMsg = ref<string>(null);
function openDialog() {
  loginFailMsg.value = null
  console.log(authBaseData)
  if (authBaseData) {
    formRef.value.validate().then(() => {
      loginValid.value.open(authBaseData);
    }).catch((err) => {
      // android uni-form报错child.onFieldChange导致弹窗无法打开
      if (!Array.isArray(err)) {
        loginValid.value.open(authBaseData);
      }
      console.log(err)
    })
  } else {
    loginFailMsg.value = '基础认证信息获取失败'
    reloadPage.value = true;
  }
}

const reloadPage = ref<boolean>(false);
async function handleReload() {
  const res = await useLoginApi().signLoginGet();
  if (res.data) {
    authBaseData = res.data as LoginBaseData
  } else {
    loginFailMsg.value = JSON.stringify(res);
  }
  reloadPage.value = false
}

function loginFn(captcha: string) {
  const loginData: LoginFormData = {
    authType: LoginAuthType.NORMAL,
    captcha: captcha,
    password: loginForm.password,
    remeberMe: true,
    state: authBaseData.state,
    username: loginForm.username
  }
  const route = currRoute()
  useLoginStore().login(loginData).then(() => {
    uni.redirectTo({url: route?.query?.redirect || '/pages/index/index'})
  }).catch((res) => {
    console.log(res)
    loginFailMsg.value = res.message || '登录失败！';
  })
}

onLoad(async (query) => {
  loginFailMsg.value = null
  const token = useLoginStore().getToken()
  if (token) {
    uni.redirectTo({ url: query?.redirect || '/pages/index/index' })
  } else {
    await handleReload();
  }
})
</script>

<style scoped lang="scss">
.refresh-btn {
  color: blue;
  border-bottom: blue solid 1px;
}

.login-container {
  position: relative;
  overflow: hidden;
  background-color: #EBEDF0;
  height: 100%;
  width: 100%;

  .login-body {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 150rpx auto 0;
    position: relative;
    z-index: 9;

    .login-form-box {
      padding: 0 20rpx;

      .login-error {
        text-align: center;
        color: var(--danger-color)
      }

      .login-btn {
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 16rpx;
        padding-top: 40rpx;
      }
    }
  }
}

.login-auth {
  .auth-input {
    :deep(.uni-easyinput__content) {
      border-radius: 24px 0 0 24px;
    }
  }

  .login-auth-image {
    width: 120px;
    height: 100%;
  }
}

:deep(.uni-easyinput__content) {
  height: 46px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.3) !important;
  box-sizing: border-box;
  border: 1px solid #FFFFFF;

  .uni-easyinput__content-input {
    background-color: transparent !important;

    input, .uni-input-placeholder {
      font-size: 32rpx;
    }
  }

  .uni-icons {
    color: #6C6C6C !important;
    padding: 0 24rpx;
  }

  .uniui-eye-filled {
    padding: 0;
  }
}

@import 'src/styles/bg/headerBg';
.login-header-bg {
  position: absolute;
  top: 0;
  left: 0;
  background-image: $--passkey-header-bg;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 1;
  width: 100%;
  height: 100%;
}

@import 'src/styles/bg/footerBg';
.login-footer-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: $--passkey-footer-bg;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.logo {
  margin: 0 auto;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(180deg, #CCEDFF 0%, rgba(255, 255, 255, 0) 74%);

  box-sizing: border-box;
  border: 4rpx solid #fff;
  box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.1);

  .logo-image {
    width: 96rpx;
    height: 96rpx;
  }
}

.sys-name-zh {
  font-size: 48rpx;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  letter-spacing: 0em;
  color: #231815;
}

.sys-name-en {
  font-size: 18rpx;
  font-weight: 300;
  line-height: normal;
  text-align: center;
  letter-spacing: 0em;

  color: #231815;
}
</style>
